<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
<div id="test" style="width:100px;height:100px;margin:0 auto;background:black;" onmouseout="out();" onmouseover="over();"></div>
<div id="test1" style="width:100px;height:100px;"></div>
<script type="text/javascript">
    var test = document.getElementById("test");
    var test1 = document.getElementById("test1");
    test.addEventListener("click",function(){
        test.style.background = "red";
    });
    test.addEventListener("mouseout",function(){
        test.style.border = "0";
    });
    test.addEventListener("mouseover",function(){
        test.style.border = "1px solid red";
    });
    function out(){
        test.style.background = "black";
        test1.style.border = "0";
    }
    function over(){
        test.style.background = "red";
        test1.style.border = "1px solid red";
    }
</script>
</body>
</html>